<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>平台数据展示</title>
    <link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/layui/css/css/layui.css">
    <style type="text/css">
       .table_con{
            margin-top: 20px;
        }
       #dataBody {
           display:block;
           height:500px;
           overflow-y:scroll;
       }

       #dataHead,#dataBody tr {
           display:table;
           table-layout:fixed;
       }
       #dataBody::-webkit-scrollbar {
           display: none;
       }
       #dataHead th{
            text-align: center;
            min-width: 200px;
        }
       #dataBody td{
           text-align: center;
           min-width: 200px;
       }
       #tableData tr th{
            background-color:rgb(197,217,241);
        }
       #tableData tr .orageColor{
            background-color:rgb(217,240,215);
        }
       #tableData tr .yellowColor{
            background-color:rgb(253,233,217);
        }
       #tableData tr .specialBg{
            background-color:rgb(251,191,143);
        }
     </style>
</head>
<body>
<div>
    <div class="layui-container " style="width: 100%;" id="indexModel">

        <div class="layui-row" style="margin-top: 10px;">
            <div class="layui-col-md3 " style="margin-right: 10px;">
                <input type="text" class="form-control" required  id="searchTime"  placeholder="请输入日期"  autocomplete="off" >
            </div>
            <div class="layui-col-md3 ">
                <div class="btn btn-success" id="searchBtn">查询</div>
            </div>
        </div>
        <div class="table_con">
            <table class="table table2 table-bordered table-hover" id="tableData">
                <thead id="dataHead">

                </thead>
                <tbody id="dataBody">

                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
<script src="${request.contextPath}/statics/plugins/layui/layui.all.js"></script>
<script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        showDataPage.init();
    });
    var showDataPage = {
        init:function () {
            var _this = this;
            var laydate = layui.laydate;
            laydate.render({
                elem: '#searchTime',
                value: new Date(),
                type:'month',
                showBottom: false,
                position: 'fixed',
            });
            _this.getData();
        },
        getData:function () {
            var baseURL = "../../";
            var _this = this;
            var  indexLoading = layer.load(2);
            var params = {
                startDate:$("#searchTime").val()
            };
            $.ajax({
                type : "post",
                url : baseURL+"platformDataDaily/findMonthlyPlatformContrast",
                contentType:"application/json",
                data:{},
                success: function(data) {
                    layer.close(indexLoading);
                    if(data.code==0){
                        _this.transData(data.result);
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    layer.close(index);
                    statsData = false;
                    layer.msg('数据获取失败');
                }
            });
        },
        transData:function (data) {
            $("#dataBody").html('');
            var theadItem = [];
            var str = '';
            for(item in data){
               // console.log(item);
               var _html = '';
               for(item2 in data[item]){
                  // console.log(item2);
                    for(var i = data[item][item2].length-1; i>-1;i--){
                        if(data[item][item2][i].param.indexOf('单产') != -1){
                            _html = '<td class="specialBg">'+data[item][item2][i].value +'</td>' + _html;
                        }else{
                            _html = '<td>'+data[item][item2][i].value+'</td>' + _html;
                        }
                        if(theadItem.indexOf(data[item][item2][i].param) == -1){
                            //console.log(data[item][item2][i].param);
                            theadItem.push(data[item][item2][i].param);
                        }
                    }
                }
                _html =  '<tr><td>'+item+'</td>' + _html + '</tr>';
               $("#dataBody").append(_html);
            };
            str = str + '<tr><th>日期</th>';
            for(var j=theadItem.length-1;j>-1;j--){
                if(theadItem[j]=='有银子IP单产' || theadItem[j]=='单个IP产出' ){
                    str = str + '<th class="orageColor">'+theadItem[j]+'</th>';
                }else if(theadItem[j]=='趣转发IP单产' || theadItem[j]=='良心赚IP单产' ){
                    str = str + '<th class="yellowColor">'+theadItem[j]+'</th>';
                }else{
                    str = str + '<th>'+theadItem[j]+'</th>';
                }

            };
            str = str + '</tr>';
            $("#dataHead").html(str);
       }
    }
</script>
</html>